<template>
  <div class="dropx">
    <DragSortCopy :imageList="imageList" :sortType="'exchange'" :item-class="'citem'" />
    <LyTable :tableData="tableData">
      动态拖拽表格
    </LyTable>
  </div>
</template>

<script setup lang="ts">
import DragSortCopy from './components/DragSort.vue';
import LyTable from './components/lyTable.vue';
import { ref } from 'vue';
const imageList = ref([
  'https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500',
  'https://img1.baidu.com/it/u=1407750889,3441968730&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=799',
  'https://img0.baidu.com/it/u=1721391133,702358773&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625',
  'https://img1.baidu.com/it/u=3316754777,2519856621&fm=253&fmt=auto&app=138&f=JPEG?w=653&h=500',
  'https://img1.baidu.com/it/u=3851364429,4209170710&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=3851364429,4209170710&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
])

const tableData = ref([{ date: '2023-4-1', name: '张三', address: '大营村' }, { date: '2023-4-1', name: '王五', address: '大营村' }, { date: '2023-4-1', name: '李四', address: '大营村' }])



</script>

<style scoped>
.dropx {
  width: 80vw;
  height: 100px;
  border: 1px dashed #999;
  margin: 50px auto;
}
</style>
<style>
.citem {
  border: 1px dashed red;
}

.bitem {
  border: 1px dashed green;
}
</style>


